<!DOCTYPE html>
<html lang="en">

<head>
    <title>活动反馈</title>
    <#include "/lx/activity/components/meta.html" />
    <#include "/lx/activity/components/stylesheets.html" />
    <link rel="stylesheet" href="//i.gtimg.cn/vipstyle/frozenui/2.0.0/css/frozen.css">
    <link rel="stylesheet" href="/lx/activity/stylesheets/feedback.css?v=3">
</head>

<body>
    <div id="app">
        <div class="block">
            <div class="field2">
                <div class="label2">您觉得活动时间段是否方便？</div>
                <!-- <div class="input-wrap2" @click="popup('#about-time-actions')"> -->
                <div class="input-wrap2 ui-select">
                    <!-- <div class="popup">
                        <div>{{ aboutTime ? aboutTime : '请选择...' }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="aboutTime">
                        <option value="">请选择...</option>
                        <option :value="item" v-for="(item, index) in aboutTimeArray">{{ item }}</option>
                    </select>
                </div>
            </div>
            <div class="field2">
                <div class="label2">您对活动场地是否满意？</div>
                <!-- <div class="input-wrap2" @click="popup('#about-place-actions')"> -->
                <div class="input-wrap2 ui-select">
                    <!-- <div class="popup">
                        <div>{{ aboutPlaceIndex !== '' ? aboutPlaceArray[aboutPlaceIndex] : '请选择...' }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="aboutPlaceIndex">
                        <option value="">请选择...</option>
                        <option :value="index" v-for="(item, index) in aboutPlaceArray">{{ item }}</option>
                    </select>
                </div>
                <div class="input-wrap2" style="margin-top: 10px;" v-if="aboutPlaceIndex + 1 == aboutPlaceArray.length">
                    <input v-model="aboutPlace" placeholder="请输入..." />
                </div>
            </div>
            <div class="field2">
                <div class="label2">您对活动流程是否满意？</div>
                <!-- <div class="input-wrap2" @click="popup('#about-flow-actions')"> -->
                <div class="input-wrap2 ui-select">
                    <!-- <div class="popup">
                        <div>{{ aboutFlowIndex !== '' ? aboutFlowArray[aboutFlowIndex] : '请选择...' }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="aboutFlowIndex">
                        <option value="">请选择...</option>
                        <option :value="index" v-for="(item, index) in aboutFlowArray">{{ item }}</option>
                    </select>
                </div>
                <div class="input-wrap2" style="margin-top: 10px;" v-if="aboutFlowIndex + 1 == aboutFlowArray.length">
                    <input v-model="aboutFlow" placeholder="请输入..." />
                </div>
            </div>
            <div class="field2">
                <div class="label2">您觉得本次活动中最有用的环节是？</div>
                <div class="input-wrap2">
                    <input v-model="bestSegment" placeholder="请输入..." />
                </div>
            </div>
            <div class="field2">
                <div class="label2">通过本次活动，您是否获得了需要的信息？</div>
                <!-- <div class="input-wrap2" @click="popup('#is-needed-actions')"> -->
                <div class="input-wrap2 ui-select">
                    <!-- <div class="popup">
                        <div>{{ isNeeded === 1 ? '是' : isNeeded === 0 ? '否' : '请选择...' }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="isNeeded">
                        <option value="">请选择...</option>
                        <option :value="1">是</option>
                        <option :value="0">否</option>
                    </select>
                </div>
            </div>
            <div class="field2">
                <div class="label2">您还想获得哪方面的信息？</div>
                <div class="input-wrap2">
                    <textarea v-model="otherNeeds" rows="4" placeholder="请输入..."></textarea>
                </div>
            </div>
            <div class="field2">
                <div class="label2">您的其它意见或建议：</div>
                <div class="input-wrap2">
                    <textarea v-model="suggestion" rows="4" placeholder="请输入..."></textarea>
                </div>
            </div>
            <div class="field2">
                <div class="label2">满分10分的话，您会给本次活动打几分？</div>
                <!-- <div class="input-wrap2" @click="popup('#score-actions')"> -->
                <div class="input-wrap2 ui-select">
                    <!-- <div class="popup">
                        <div>{{ score !== '' ? score : '请选择...' }}</div>
                        <img src="/lx/activity/assets/img/arrowD.png"></img>
                    </div> -->
                    <select v-model="score">
                        <option value="">请选择...</option>
                        <option :value="item" v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]">{{ item }}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="submit-wrap">
            <button class="am-btn am-btn-block submit theme-background-color1" @click="submit">提交</button>
        </div>
        <!-- 弹窗 Modals start -->
        <div class="am-modal-actions" id="about-time-actions">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">您觉得活动时间段是否方便？</li>
                    <li @click="aboutTime = item" data-am-modal-close v-for="(item, index) in aboutTimeArray"><a href="javascript:">{{ item }}</a></li>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-block theme-background-color1" style="color: #fff;" data-am-modal-close>取消</button>
            </div>
        </div>
        <div class="am-modal-actions" id="about-place-actions">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">您对活动场地是否满意？</li>
                    <li @click="aboutPlaceIndex = index" data-am-modal-close v-for="(item, index) in aboutPlaceArray"><a href="javascript:">{{ item }}</a></li>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-block theme-background-color1" style="color: #fff;" data-am-modal-close>取消</button>
            </div>
        </div>
        <div class="am-modal-actions" id="about-flow-actions">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">您对活动流程是否满意？</li>
                    <li @click="aboutFlowIndex = index" data-am-modal-close v-for="(item, index) in aboutFlowArray"><a href="javascript:">{{ item }}</a></li>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-block theme-background-color1" style="color: #fff;" data-am-modal-close>取消</button>
            </div>
        </div>
        <div class="am-modal-actions" id="is-needed-actions">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">通过本次活动，您是否获得了需要的信息？</li>
                    <li @click="isNeeded = 1" data-am-modal-close><a href="javascript:">是</a></li>
                    <li @click="isNeeded = 0" data-am-modal-close><a href="javascript:">否</a></li>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-block theme-background-color1" style="color: #fff;" data-am-modal-close>取消</button>
            </div>
        </div>
        <div class="am-modal-actions" id="score-actions">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">通过本次活动，您是否获得了需要的信息？</li>
                    <li @click="score = index" data-am-modal-close v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"><a href="javascript:">{{ index }}</a></li>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-block theme-background-color1" style="color: #fff;" data-am-modal-close>取消</button>
            </div>
        </div>
        <!-- 弹窗 Modals end -->
    </div>
    <#include "/lx/activity/components/scripts.html" />
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data() {
            return {
                activityId: '${activityId!}',
                aboutTime: '',
                aboutPlace: '',
                aboutFlow: '',
                bestSegment: '',
                isNeeded: '',
                otherNeeds: '',
                suggestion: '',
                score: '',

                aboutTimeArray: ["方便", "不方便，时间太早", "不方便，时间太晚"],
                aboutPlaceArray: ["满意", "不满意（请填空）"],
                aboutPlaceIndex: '',
                aboutFlowArray: ["满意", "不满意（请填空）"],
                aboutFlowIndex: ''
            }
        },
        mounted: function() {
        },
        methods: {
            submit() {
                var self = this;
                if (self.aboutTime === '') {
                    msg("请选择活动时间段是否方便");
                    return;
                }
                if (self.aboutPlaceIndex === '' || (self.aboutPlaceIndex + 1 == self.aboutPlaceArray.length && !self.aboutPlace)) {
                    msg("请选择活动场地是否满意");
                    return;
                }
                if (self.aboutFlowIndex === '' || (self.aboutFlowIndex + 1 == self.aboutFlowArray.length && !self.aboutFlow)) {
                    msg("请选择活动流程是否满意");
                    return;
                }
                if (!self.bestSegment) {
                    msg("请输入本次活动中最有用的环节");
                    return;
                }
                if (self.isNeeded === '') {
                    msg("请选择是否获得了需要的信息");
                    return;
                }
                if (!self.otherNeeds) {
                    msg("请输入您还想获得哪方面的信息");
                    return;
                }
                if (self.score === '') {
                    msg("请选择分数");
                    return;
                }

                if (self.aboutPlaceIndex + 1 != self.aboutPlaceArray.length) {
                    self.aboutPlace = self.aboutPlaceArray[self.aboutPlaceIndex];
                }
                if (self.aboutFlowIndex + 1 != self.aboutFlowArray.length) {
                    self.aboutFlow = self.aboutFlowArray[self.aboutFlowIndex];
                }

                var self = this;
                var url = '/lx/mini/activity/submitFeedback';
                var params = {
                    activityId: self.activityId,
                    aboutTime: self.aboutTime,
                    aboutPlace: self.aboutPlace,
                    aboutFlow: self.aboutFlow,
                    bestSegment: self.bestSegment,
                    isNeeded: self.isNeeded,
                    otherNeeds: self.otherNeeds,
                    suggestion: self.suggestion,
                    score: self.score
                };
                var success = function(res) {
                    window.history.go(-1);
                }
                var fail = function() {};
                var complete = function() {};
                request(url, params, success, fail, complete);
            },
            popup(ele) {
                $(ele).modal('open');
            }
        }
    })
    </script>
    <script>
    // wx.ready(function() {
    //     initWXShare()
    // })
    </script>
</body>

</html>